<template>
    <div>练习页面</div>
    <div class="warp">
        <div>count:{{ $state.count }}</div>
        <button @click="add">改变按钮</button>
    </div>
    <child @onChang="onChang" :msg="$state.msg" ref="childRef"> </child>
    <PropsChild @updata="onUpdata" />
    <PropsDefaults />
</template>
<script lang="ts" setup>
    import { ref, reactive, onMounted } from 'vue'
    import child from './child.vue'
    import PropsChild from './PropsChild.vue'
    import PropsDefaults from './PropsDefaults.vue'
    interface State {
        count: number
        msg: string
    }
    const $state: State = reactive({
        count: 0,
        msg: '初始默认值',
    })
    const add = () => $state.count++

    const onChang = (param: String) => {
        $state.count++
        $state.msg = param + ':' + $state.count
    }
    const childRef = ref()
    onMounted(() => {
        console.log('>>>>>>>>>>>')
        console.log(childRef.value.$state.name)
    })
    const onUpdata = (param: string): void => {
        console.log('触发更新', param)
    }
</script>
<style>
    .warp {
        height: 120px;
        border: 1px solid red;
        margin-bottom: 10px;
    }
</style>
